<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--<head>-->
<!--  <meta charset="UTF-8">-->
<!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--  <title>品牌授权码获取</title>-->
<!--  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">-->
<!--  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">-->
<!--  <style>-->
<!--    * {-->
<!--      margin: 0;-->
<!--      padding: 0;-->
<!--      box-sizing: border-box;-->
<!--      font-family: 'Noto Sans SC', sans-serif;-->
<!--    }-->

<!--    body {-->
<!--      background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);-->
<!--      min-height: 100vh;-->
<!--      display: flex;-->
<!--      justify-content: center;-->
<!--      align-items: center;-->
<!--      padding: 20px;-->
<!--    }-->

<!--    .auth-container {-->
<!--      width: 100%;-->
<!--      max-width: 500px;-->
<!--      background: white;-->
<!--      border-radius: 16px;-->
<!--      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);-->
<!--      overflow: hidden;-->
<!--      position: relative;-->
<!--      animation: fadeIn 0.5s ease-out;-->
<!--    }-->

<!--    @keyframes fadeIn {-->
<!--      from { opacity: 0; transform: translateY(20px); }-->
<!--      to { opacity: 1; transform: translateY(0); }-->
<!--    }-->

<!--    .brand-banner {-->
<!--      position: absolute;-->
<!--      top: 15px;-->
<!--      left: 15px;-->
<!--      background: rgba(255, 255, 255, 0.9);-->
<!--      border-radius: 8px;-->
<!--      padding: 8px 15px;-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      gap: 8px;-->
<!--      font-size: 14px;-->
<!--      font-weight: 500;-->
<!--      box-shadow: 0 2px 8px rgba(0,0,0,0.1);-->
<!--      z-index: 10;-->
<!--      animation: slideIn 0.4s ease-out;-->
<!--    }-->

<!--    @keyframes slideIn {-->
<!--      from { opacity: 0; transform: translateX(-20px); }-->
<!--      to { opacity: 1; transform: translateX(0); }-->
<!--    }-->

<!--    .brand-banner i {-->
<!--      color: #4361ee;-->
<!--    }-->

<!--    .auth-header {-->
<!--      background: linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%);-->
<!--      color: white;-->
<!--      padding: 30px;-->
<!--      text-align: center;-->
<!--      position: relative;-->
<!--      overflow: hidden;-->
<!--    }-->

<!--    .auth-header::before {-->
<!--      content: '';-->
<!--      position: absolute;-->
<!--      top: -50%;-->
<!--      left: -50%;-->
<!--      width: 200%;-->
<!--      height: 200%;-->
<!--      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);-->
<!--      transform: rotate(30deg);-->
<!--    }-->

<!--    .auth-header h1 {-->
<!--      font-size: 28px;-->
<!--      margin-bottom: 10px;-->
<!--      position: relative;-->
<!--      z-index: 1;-->
<!--    }-->

<!--    .auth-header p {-->
<!--      opacity: 0.9;-->
<!--      font-size: 16px;-->
<!--      position: relative;-->
<!--      z-index: 1;-->
<!--    }-->

<!--    .login-form {-->
<!--      padding: 30px;-->
<!--    }-->

<!--    .form-group {-->
<!--      margin-bottom: 20px;-->
<!--      position: relative;-->
<!--    }-->

<!--    .form-group label {-->
<!--      display: block;-->
<!--      margin-bottom: 8px;-->
<!--      font-weight: 500;-->
<!--      color: #495057;-->
<!--    }-->

<!--    .input-with-icon {-->
<!--      position: relative;-->
<!--    }-->

<!--    .input-with-icon i {-->
<!--      position: absolute;-->
<!--      left: 15px;-->
<!--      top: 50%;-->
<!--      transform: translateY(-50%);-->
<!--      color: #6c757d;-->
<!--      transition: color 0.3s;-->
<!--    }-->

<!--    .form-input {-->
<!--      width: 100%;-->
<!--      padding: 14px 14px 14px 45px;-->
<!--      border: 1px solid #ced4da;-->
<!--      border-radius: 8px;-->
<!--      font-size: 16px;-->
<!--      transition: all 0.3s;-->
<!--      background: #f8f9fa;-->
<!--    }-->

<!--    .form-input:focus {-->
<!--      outline: none;-->
<!--      border-color: #4361ee;-->
<!--      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);-->
<!--      background: white;-->
<!--    }-->

<!--    .form-input:focus + i {-->
<!--      color: #4361ee;-->
<!--    }-->

<!--    .login-btn {-->
<!--      width: 100%;-->
<!--      background: linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%);-->
<!--      color: white;-->
<!--      border: none;-->
<!--      padding: 14px;-->
<!--      border-radius: 8px;-->
<!--      font-size: 16px;-->
<!--      font-weight: 500;-->
<!--      cursor: pointer;-->
<!--      transition: all 0.3s ease;-->
<!--      margin-top: 10px;-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      justify-content: center;-->
<!--      gap: 10px;-->
<!--      position: relative;-->
<!--      overflow: hidden;-->
<!--    }-->

<!--    .login-btn::after {-->
<!--      content: '';-->
<!--      position: absolute;-->
<!--      top: -50%;-->
<!--      left: -50%;-->
<!--      width: 200%;-->
<!--      height: 200%;-->
<!--      background: rgba(255,255,255,0.1);-->
<!--      transform: rotate(30deg);-->
<!--      transition: all 0.6s;-->
<!--    }-->

<!--    .login-btn:hover {-->
<!--      transform: translateY(-2px);-->
<!--      box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);-->
<!--    }-->

<!--    .login-btn:hover::after {-->
<!--      transform: rotate(30deg) translate(20%, 20%);-->
<!--    }-->

<!--    .login-btn:disabled {-->
<!--      background: #adb5bd;-->
<!--      cursor: not-allowed;-->
<!--      transform: none;-->
<!--      box-shadow: none;-->
<!--    }-->

<!--    .code-section {-->
<!--      background: #f8f9fa;-->
<!--      border-radius: 12px;-->
<!--      padding: 25px;-->
<!--      text-align: center;-->
<!--      margin: 25px 0;-->
<!--      border: 1px dashed #e9ecef;-->
<!--      display: none;-->
<!--      animation: fadeInUp 0.5s ease-out;-->
<!--    }-->

<!--    @keyframes fadeInUp {-->
<!--      from { opacity: 0; transform: translateY(20px); }-->
<!--      to { opacity: 1; transform: translateY(0); }-->
<!--    }-->

<!--    .code-title {-->
<!--      color: #6c757d;-->
<!--      margin-bottom: 15px;-->
<!--      font-size: 16px;-->
<!--    }-->

<!--    .auth-code {-->
<!--      font-size: 32px;-->
<!--      font-weight: 700;-->
<!--      letter-spacing: 2px;-->
<!--      background: white;-->
<!--      padding: 15px 25px;-->
<!--      border-radius: 10px;-->
<!--      display: inline-block;-->
<!--      color: #3a0ca3;-->
<!--      border: 1px solid #e9ecef;-->
<!--      font-family: monospace;-->
<!--      margin: 10px 0;-->
<!--      box-shadow: 0 4px 10px rgba(0,0,0,0.05);-->
<!--      position: relative;-->
<!--      overflow: hidden;-->
<!--    }-->

<!--    .auth-code::after {-->
<!--      content: '';-->
<!--      position: absolute;-->
<!--      top: 0;-->
<!--      left: 0;-->
<!--      width: 100%;-->
<!--      height: 100%;-->
<!--      background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);-->
<!--      animation: shimmer 2s infinite;-->
<!--    }-->

<!--    @keyframes shimmer {-->
<!--      0% { transform: translateX(-100%); }-->
<!--      100% { transform: translateX(100%); }-->
<!--    }-->

<!--    .expiry-info {-->
<!--      display: flex;-->
<!--      justify-content: center;-->
<!--      gap: 20px;-->
<!--      margin-top: 15px;-->
<!--      color: #6c757d;-->
<!--      font-size: 14px;-->
<!--    }-->

<!--    .info-item {-->
<!--      display: flex;-->
<!--      flex-direction: column;-->
<!--      align-items: center;-->
<!--    }-->

<!--    .info-value {-->
<!--      font-weight: 600;-->
<!--      color: #3a0ca3;-->
<!--      margin-top: 5px;-->
<!--    }-->

<!--    .action-section {-->
<!--      display: flex;-->
<!--      flex-direction: column;-->
<!--      gap: 15px;-->
<!--      display: none;-->
<!--      animation: fadeIn 0.5s ease-out;-->
<!--    }-->

<!--    .action-btn {-->
<!--      background: linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%);-->
<!--      color: white;-->
<!--      border: none;-->
<!--      padding: 16px;-->
<!--      border-radius: 10px;-->
<!--      font-size: 16px;-->
<!--      font-weight: 500;-->
<!--      cursor: pointer;-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      justify-content: center;-->
<!--      gap: 10px;-->
<!--      transition: all 0.3s ease;-->
<!--      position: relative;-->
<!--      overflow: hidden;-->
<!--    }-->

<!--    .action-btn::after {-->
<!--      content: '';-->
<!--      position: absolute;-->
<!--      top: -50%;-->
<!--      left: -50%;-->
<!--      width: 200%;-->
<!--      height: 200%;-->
<!--      background: rgba(255,255,255,0.1);-->
<!--      transform: rotate(30deg);-->
<!--      transition: all 0.6s;-->
<!--    }-->

<!--    .action-btn:hover {-->
<!--      transform: translateY(-2px);-->
<!--      box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);-->
<!--    }-->

<!--    .action-btn:hover::after {-->
<!--      transform: rotate(30deg) translate(20%, 20%);-->
<!--    }-->

<!--    .action-btn.secondary {-->
<!--      background: #f8f9fa;-->
<!--      color: #495057;-->
<!--      border: 1px solid #e9ecef;-->
<!--    }-->

<!--    .action-btn.secondary:hover {-->
<!--      background: #f1f3f5;-->
<!--      transform: translateY(-2px);-->
<!--      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);-->
<!--    }-->

<!--    .loading-section {-->
<!--      display: flex;-->
<!--      flex-direction: column;-->
<!--      align-items: center;-->
<!--      justify-content: center;-->
<!--      padding: 40px;-->
<!--      display: none;-->
<!--    }-->

<!--    .spinner {-->
<!--      width: 50px;-->
<!--      height: 50px;-->
<!--      border: 5px solid rgba(67, 97, 238, 0.2);-->
<!--      border-top: 5px solid #4361ee;-->
<!--      border-radius: 50%;-->
<!--      animation: spin 1s linear infinite;-->
<!--      margin-bottom: 20px;-->
<!--    }-->

<!--    @keyframes spin {-->
<!--      0% { transform: rotate(0deg); }-->
<!--      100% { transform: rotate(360deg); }-->
<!--    }-->

<!--    .loading-text {-->
<!--      color: #6c757d;-->
<!--      font-size: 16px;-->
<!--      text-align: center;-->
<!--    }-->

<!--    .error-section {-->
<!--      background: #fff5f5;-->
<!--      border: 1px solid #ffecec;-->
<!--      border-radius: 12px;-->
<!--      padding: 25px;-->
<!--      text-align: center;-->
<!--      margin-bottom: 25px;-->
<!--      display: none;-->
<!--      animation: shake 0.5s ease;-->
<!--    }-->

<!--    @keyframes shake {-->
<!--      0%, 100% { transform: translateX(0); }-->
<!--      20%, 60% { transform: translateX(-8px); }-->
<!--      40%, 80% { transform: translateX(8px); }-->
<!--    }-->

<!--    .error-icon {-->
<!--      font-size: 48px;-->
<!--      color: #ef476f;-->
<!--      margin-bottom: 15px;-->
<!--    }-->

<!--    .error-title {-->
<!--      color: #ef476f;-->
<!--      font-size: 20px;-->
<!--      margin-bottom: 10px;-->
<!--    }-->

<!--    .error-message {-->
<!--      color: #6c757d;-->
<!--      margin-bottom: 20px;-->
<!--      white-space: pre-wrap;-->
<!--      word-break: break-word;-->
<!--      text-align: left;-->
<!--      background: #fff;-->
<!--      padding: 15px;-->
<!--      border-radius: 8px;-->
<!--      font-family: monospace;-->
<!--      max-height: 200px;-->
<!--      overflow-y: auto;-->
<!--      font-size: 14px;-->
<!--    }-->

<!--    .instructions {-->
<!--      background: #f0f4ff;-->
<!--      border-left: 4px solid #4361ee;-->
<!--      padding: 20px;-->
<!--      border-radius: 0 10px 10px 0;-->
<!--      margin-top: 30px;-->
<!--      display: none;-->
<!--      animation: fadeIn 0.5s ease-out;-->
<!--    }-->

<!--    .instructions h3 {-->
<!--      color: #3a0ca3;-->
<!--      margin-bottom: 15px;-->
<!--      font-size: 18px;-->
<!--    }-->

<!--    .instructions ol {-->
<!--      padding-left: 20px;-->
<!--    }-->

<!--    .instructions li {-->
<!--      margin-bottom: 10px;-->
<!--      line-height: 1.6;-->
<!--      position: relative;-->
<!--    }-->

<!--    .instructions li::before {-->
<!--      content: '';-->
<!--      position: absolute;-->
<!--      left: -15px;-->
<!--      top: 8px;-->
<!--      width: 8px;-->
<!--      height: 8px;-->
<!--      background: #4361ee;-->
<!--      border-radius: 50%;-->
<!--    }-->

<!--    .footer {-->
<!--      text-align: center;-->
<!--      padding: 20px;-->
<!--      color: #6c757d;-->
<!--      font-size: 14px;-->
<!--      border-top: 1px solid #f1f3f5;-->
<!--    }-->

<!--    .brand-logo {-->
<!--      position: absolute;-->
<!--      top: 20px;-->
<!--      right: 20px;-->
<!--      width: 60px;-->
<!--      height: 60px;-->
<!--      background: white;-->
<!--      border-radius: 12px;-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      justify-content: center;-->
<!--      font-size: 24px;-->
<!--      font-weight: bold;-->
<!--      color: #4361ee;-->
<!--      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);-->
<!--      z-index: 1;-->
<!--      animation: pulse 2s infinite;-->
<!--    }-->

<!--    @keyframes pulse {-->
<!--      0% { box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.4); }-->
<!--      70% { box-shadow: 0 0 0 12px rgba(67, 97, 238, 0); }-->
<!--      100% { box-shadow: 0 0 0 0 rgba(67, 97, 238, 0); }-->
<!--    }-->

<!--    .password-toggle {-->
<!--      position: absolute;-->
<!--      right: 15px;-->
<!--      top: 50%;-->
<!--      transform: translateY(-50%);-->
<!--      color: #6c757d;-->
<!--      cursor: pointer;-->
<!--      transition: color 0.3s;-->
<!--    }-->

<!--    .password-toggle:hover {-->
<!--      color: #4361ee;-->
<!--    }-->

<!--    .brand-info {-->
<!--      background: #eef2ff;-->
<!--      padding: 15px;-->
<!--      border-radius: 10px;-->
<!--      margin-bottom: 20px;-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      gap: 12px;-->
<!--      display: none;-->
<!--    }-->

<!--    .brand-icon {-->
<!--      width: 40px;-->
<!--      height: 40px;-->
<!--      background: #dbe4ff;-->
<!--      border-radius: 8px;-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      justify-content: center;-->
<!--      font-size: 18px;-->
<!--      color: #4361ee;-->
<!--    }-->

<!--    .brand-details {-->
<!--      flex: 1;-->
<!--    }-->

<!--    .brand-name {-->
<!--      font-weight: 600;-->
<!--      color: #3a0ca3;-->
<!--      margin-bottom: 3px;-->
<!--    }-->

<!--    .brand-id {-->
<!--      font-size: 13px;-->
<!--      color: #6c757d;-->
<!--    }-->

<!--    .url-info {-->
<!--      background: #f0f4ff;-->
<!--      padding: 12px 15px;-->
<!--      border-radius: 8px;-->
<!--      margin-top: 20px;-->
<!--      font-size: 13px;-->
<!--      color: #495057;-->
<!--      display: none;-->
<!--    }-->

<!--    .url-info code {-->
<!--      background: rgba(67, 97, 238, 0.1);-->
<!--      padding: 2px 6px;-->
<!--      border-radius: 4px;-->
<!--      font-family: monospace;-->
<!--      color: #4361ee;-->
<!--      margin: 0 3px;-->
<!--    }-->

<!--    .api-request {-->
<!--      background: #f8f9fa;-->
<!--      border-radius: 8px;-->
<!--      padding: 15px;-->
<!--      margin-top: 20px;-->
<!--      display: none;-->
<!--      font-family: monospace;-->
<!--      font-size: 14px;-->
<!--      color: #495057;-->
<!--      white-space: pre-wrap;-->
<!--    }-->

<!--    .api-title {-->
<!--      font-weight: 600;-->
<!--      margin-bottom: 8px;-->
<!--      color: #3a0ca3;-->
<!--    }-->

<!--    .api-data {-->
<!--      background: white;-->
<!--      padding: 10px;-->
<!--      border-radius: 6px;-->
<!--      border: 1px solid #e9ecef;-->
<!--      overflow-x: auto;-->
<!--    }-->
<!--  </style>-->
<!--</head>-->
<!--<body>-->
<!--  <div class="auth-container">-->
<!--    <div id="brandBanner" class="brand-banner" style="display: none;">-->
<!--      <i class="fas fa-tag"></i>-->
<!--      <span id="currentBrand">品牌信息</span>-->
<!--    </div>-->

<!--    <div class="auth-header">-->
<!--      <div class="brand-logo">-->
<!--        <i class="fas fa-key"></i>-->
<!--      </div>-->
<!--      <h1>品牌授权码获取</h1>-->
<!--      <p>请先验证您的身份</p>-->
<!--    </div>-->

<!--    <div class="login-form">-->
<!--      <div id="brandInfo" class="brand-info">-->
<!--        <div class="brand-icon">-->
<!--          <i class="fas fa-building"></i>-->
<!--        </div>-->
<!--        <div class="brand-details">-->
<!--          <div class="brand-name" id="brandName">品牌名称</div>-->
<!--          <div class="brand-id">品牌ID: <span id="brandId"></span></div>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="form-group">-->
<!--        <label for="username">用户名</label>-->
<!--        <div class="input-with-icon">-->
<!--          <i class="fas fa-user"></i>-->
<!--          <input type="text" id="username" class="form-input" placeholder="请输入用户ID" autocomplete="username">-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="form-group">-->
<!--        <label for="password">密码</label>-->
<!--        <div class="input-with-icon">-->
<!--          <i class="fas fa-lock"></i>-->
<!--          <input type="password" id="password" class="form-input" placeholder="请输入密码" autocomplete="current-password">-->
<!--          <span class="password-toggle" id="passwordToggle">-->
<!--            <i class="fas fa-eye"></i>-->
<!--          </span>-->
<!--        </div>-->
<!--      </div>-->

<!--      <button id="loginBtn" class="login-btn">-->
<!--        <i class="fas fa-key"></i> 获取授权码-->
<!--      </button>-->

<!--      <div id="loadingSection" class="loading-section">-->
<!--        <div class="spinner"></div>-->
<!--        <p class="loading-text">正在验证您的身份并生成授权码...</p>-->
<!--        <p class="loading-text" id="apiDetails"></p>-->
<!--      </div>-->

<!--      <div id="errorSection" class="error-section">-->
<!--        <div class="error-icon">⚠️</div>-->
<!--        <h3 class="error-title">验证失败</h3>-->
<!--        <p class="error-message" id="errorMessage">用户名或密码不正确</p>-->
<!--        <button class="action-btn" id="retryButton">-->
<!--          <i class="fas fa-redo"></i> 重试-->
<!--        </button>-->
<!--      </div>-->

<!--      <div id="successSection">-->
<!--        <div class="code-section">-->
<!--          <p class="code-title">您的专属授权码</p>-->
<!--          <div class="auth-code" id="authCode"></div>-->
<!--          <div class="expiry-info">-->
<!--            <div class="info-item">-->
<!--              <span>有效期</span>-->
<!--              <span class="info-value">30分钟</span>-->
<!--            </div>-->
<!--            <div class="info-item">-->
<!--              <span>生成时间</span>-->
<!--              <span class="info-value" id="generationTime"></span>-->
<!--            </div>-->
<!--            <div class="info-item">-->
<!--              <span>关联品牌</span>-->
<!--              <span class="info-value" id="brandValue"></span>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="action-section">-->
<!--          <button class="action-btn" id="copyButton">-->
<!--            <i class="fas fa-copy"></i> 复制授权码-->
<!--          </button>-->
<!--          <button class="action-btn secondary" id="newCodeButton">-->
<!--            <i class="fas fa-sync"></i> 获取新授权码-->
<!--          </button>-->
<!--        </div>-->

<!--        <div class="instructions">-->
<!--          <h3>如何使用授权码？</h3>-->
<!--          <ol>-->
<!--            <li>返回您的应用程序</li>-->
<!--            <li>在授权码输入框中粘贴此代码</li>-->
<!--            <li>完成账号绑定流程</li>-->
<!--            <li>授权码将在30分钟后失效</li>-->
<!--          </ol>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div id="urlInfo" class="url-info">-->
<!--        <i class="fas fa-info-circle"></i> 此页面已通过URL参数<code>brand</code>接收品牌信息-->
<!--      </div>-->

<!--      <div id="apiRequest" class="api-request">-->
<!--        <div class="api-title">API请求详情：</div>-->
<!--        <div class="api-data" id="apiRequestData"></div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="footer">-->
<!--      <p>安全授权服务 | 保护您的账号安全</p>-->
<!--    </div>-->
<!--  </div>-->

<!--  <script>-->
<!--    document.addEventListener('DOMContentLoaded', function() {-->
<!--      // 获取元素引用-->
<!--      const loginBtn = document.getElementById('loginBtn');-->
<!--      const usernameInput = document.getElementById('username');-->
<!--      const passwordInput = document.getElementById('password');-->
<!--      const passwordToggle = document.getElementById('passwordToggle');-->
<!--      const loadingSection = document.getElementById('loadingSection');-->
<!--      const errorSection = document.getElementById('errorSection');-->
<!--      const successSection = document.getElementById('successSection');-->
<!--      const codeSection = document.querySelector('.code-section');-->
<!--      const actionSection = document.querySelector('.action-section');-->
<!--      const instructions = document.querySelector('.instructions');-->
<!--      const authCodeElement = document.getElementById('authCode');-->
<!--      const generationTimeElement = document.getElementById('generationTime');-->
<!--      const errorMessageElement = document.getElementById('errorMessage');-->
<!--      const retryButton = document.getElementById('retryButton');-->
<!--      const copyButton = document.getElementById('copyButton');-->
<!--      const newCodeButton = document.getElementById('newCodeButton');-->
<!--      const brandBanner = document.getElementById('brandBanner');-->
<!--      const currentBrandElement = document.getElementById('currentBrand');-->
<!--      const brandValueElement = document.getElementById('brandValue');-->
<!--      const brandInfo = document.getElementById('brandInfo');-->
<!--      const brandName = document.getElementById('brandName');-->
<!--      const brandId = document.getElementById('brandId');-->
<!--      const urlInfo = document.getElementById('urlInfo');-->
<!--      const apiDetails = document.getElementById('apiDetails');-->
<!--      const apiRequest = document.getElementById('apiRequest');-->
<!--      const apiRequestData = document.getElementById('apiRequestData');-->

<!--      // 品牌名称映射（只保留xiaomi和midea）-->
<!--      const brandMapping = {-->
<!--        xiaomi: { name: "小米", id: "XIAOMI-001" },-->
<!--        midea: { name: "美的", id: "MIDEA-002" },-->
<!--        default: { name: "未指定品牌", id: "N/A" }-->
<!--      };-->

<!--      // 初始状态设置-->
<!--      errorSection.style.display = 'none';-->
<!--      loadingSection.style.display = 'none';-->
<!--      codeSection.style.display = 'none';-->
<!--      actionSection.style.display = 'none';-->
<!--      instructions.style.display = 'none';-->
<!--      brandBanner.style.display = 'none';-->
<!--      brandInfo.style.display = 'none';-->
<!--      urlInfo.style.display = 'none';-->
<!--      apiRequest.style.display = 'none';-->

<!--      // 从URL中获取brand参数-->
<!--      const urlParams = new URLSearchParams(window.location.search);-->
<!--      let brand = urlParams.get('brand');-->

<!--      // 如果URL中有brand参数，显示品牌信息-->
<!--      if (brand) {-->
<!--        // 显示品牌横幅-->
<!--        brandBanner.style.display = 'flex';-->

<!--        // 显示品牌信息卡片-->
<!--        brandInfo.style.display = 'flex';-->

<!--        // 显示URL参数信息-->
<!--        urlInfo.style.display = 'block';-->

<!--        // 获取品牌显示名称-->
<!--        const brandData = brandMapping[brand] || brandMapping.default;-->
<!--        brandName.textContent = brandData.name;-->
<!--        brandId.textContent = brandData.id;-->
<!--        currentBrandElement.textContent = brandData.name;-->
<!--      } else {-->
<!--        // 如果没有品牌参数，显示默认品牌-->
<!--        brand = 'default';-->
<!--        const brandData = brandMapping.default;-->
<!--        brandName.textContent = brandData.name;-->
<!--        brandId.textContent = brandData.id;-->
<!--      }-->

<!--      // 密码显示/隐藏切换-->
<!--      passwordToggle.addEventListener('click', function() {-->
<!--        if (passwordInput.type === 'password') {-->
<!--          passwordInput.type = 'text';-->
<!--          passwordToggle.innerHTML = '<i class="fas fa-eye-slash"></i>';-->
<!--        } else {-->
<!--          passwordInput.type = 'password';-->
<!--          passwordToggle.innerHTML = '<i class="fas fa-eye"></i>';-->
<!--        }-->
<!--      });-->

<!--      // 获取授权码按钮事件-->
<!--      loginBtn.addEventListener('click', function() {-->
<!--        const userId = usernameInput.value.trim();-->
<!--        const password = passwordInput.value;-->

<!--        if (!userId || !password) {-->
<!--          showError('请输入用户ID和密码');-->
<!--          return;-->
<!--        }-->

<!--        // 显示加载状态-->
<!--        showLoading();-->

<!--        // 获取授权码（包含品牌信息）-->
<!--        getAuthorizationCode(userId, password, brand);-->
<!--      });-->

<!--      // 获取授权码函数 - 调用真实API-->
<!--      async function getAuthorizationCode(userId, password, brand) {-->
<!--        try {-->
<!--          // 显示API请求详情-->
<!--          apiDetails.innerHTML = `正在请求API: /mock-auth/getAuthorizationCode<br>品牌参数: <code>${brand}</code>`;-->

<!--          // 构造请求体，包含品牌信息-->
<!--          const requestBody = {-->
<!--            userId: userId,-->
<!--            brand: brand-->
<!--          };-->

<!--          // 显示API请求详情-->
<!--          apiRequestData.textContent = JSON.stringify(requestBody, null, 2);-->
<!--          apiRequest.style.display = 'block';-->

<!--          // 调用真实API-->
<!--          const response = await fetch('http://localhost:3000/mockapi/auth/getAuthorizationCode', {-->
<!--            method: 'POST',-->
<!--            headers: {-->
<!--              'Content-Type': 'application/json'-->
<!--            },-->
<!--            body: JSON.stringify(requestBody)-->
<!--          });-->

<!--          // 检查响应状态-->
<!--          if (!response.ok) {-->
<!--            // 尝试解析错误信息-->
<!--            let errorMsg = `API请求失败 (状态码: ${response.status})`;-->

<!--            try {-->
<!--              const errorData = await response.json();-->
<!--              if (errorData.message) {-->
<!--                errorMsg += `: ${errorData.message}`;-->
<!--              } else if (errorData.error) {-->
<!--                errorMsg += `: ${errorData.error}`;-->
<!--              }-->
<!--            } catch (jsonError) {-->
<!--              // 如果响应不是JSON，使用状态文本-->
<!--              const statusText = response.statusText || '未知错误';-->
<!--              errorMsg += `: ${statusText}`;-->
<!--            }-->

<!--            throw new Error(errorMsg);-->
<!--          }-->

<!--          // 解析成功响应-->
<!--          const data = await response.json();-->

<!--          if (data.status !== 'success') {-->
<!--            throw new Error(data.message || '获取授权码失败');-->
<!--          }-->

<!--          // 显示授权码和品牌信息-->
<!--          authCodeElement.textContent = data.data.authorizationCode;-->
<!--          generationTimeElement.textContent = new Date().toLocaleTimeString();-->

<!--          // 显示品牌名称-->
<!--          const brandData = brandMapping[brand] || brandMapping.default;-->
<!--          brandValueElement.textContent = brandData.name;-->

<!--          showSuccess();-->
<!--        } catch (err) {-->
<!--          // 显示详细的错误信息-->
<!--          showError(err.message || '发生未知错误');-->
<!--        }-->
<!--      }-->

<!--      // 显示加载状态-->
<!--      function showLoading() {-->
<!--        loadingSection.style.display = 'flex';-->
<!--        errorSection.style.display = 'none';-->
<!--        codeSection.style.display = 'none';-->
<!--        actionSection.style.display = 'none';-->
<!--        instructions.style.display = 'none';-->
<!--        apiRequest.style.display = 'none';-->
<!--      }-->

<!--      // 显示成功状态-->
<!--      function showSuccess() {-->
<!--        loadingSection.style.display = 'none';-->
<!--        errorSection.style.display = 'none';-->
<!--        codeSection.style.display = 'block';-->
<!--        actionSection.style.display = 'flex';-->
<!--        instructions.style.display = 'block';-->
<!--      }-->

<!--      // 显示错误状态-->
<!--      function showError(message) {-->
<!--        // 确保错误信息能正确显示-->
<!--        errorMessageElement.textContent = message;-->
<!--        loadingSection.style.display = 'none';-->
<!--        errorSection.style.display = 'block';-->
<!--        codeSection.style.display = 'none';-->
<!--        actionSection.style.display = 'none';-->
<!--        instructions.style.display = 'none';-->
<!--      }-->

<!--      // 事件监听器-->
<!--      retryButton.addEventListener('click', function() {-->
<!--        errorSection.style.display = 'none';-->
<!--        usernameInput.focus();-->
<!--      });-->

<!--      newCodeButton.addEventListener('click', function() {-->
<!--        showLoading();-->
<!--        getAuthorizationCode(usernameInput.value.trim(), passwordInput.value, brand);-->
<!--      });-->

<!--      copyButton.addEventListener('click', function() {-->
<!--        const text = authCodeElement.textContent;-->

<!--        // 尝试使用现代的Clipboard API-->
<!--        if (navigator.clipboard && navigator.clipboard.writeText) {-->
<!--          navigator.clipboard.writeText(text)-->
<!--            .then(() => {-->
<!--              showCopySuccess();-->
<!--            })-->
<!--            .catch(err => {-->
<!--              console.error('复制失败:', err);-->
<!--              fallbackCopyText(text);-->
<!--            });-->
<!--        } else {-->
<!--          fallbackCopyText(text);-->
<!--        }-->
<!--      });-->

<!--      // 显示复制成功提示-->
<!--      function showCopySuccess() {-->
<!--        const originalText = copyButton.innerHTML;-->
<!--        copyButton.innerHTML = '<i class="fas fa-check"></i> 已复制';-->
<!--        copyButton.style.background = 'linear-gradient(90deg, #06d6a0 0%, #049c6b 100%)';-->

<!--        setTimeout(() => {-->
<!--          copyButton.innerHTML = originalText;-->
<!--          copyButton.style.background = 'linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%)';-->
<!--        }, 2000);-->
<!--      }-->

<!--      // 传统复制方法-->
<!--      function fallbackCopyText(text) {-->
<!--        const textarea = document.createElement('textarea');-->
<!--        textarea.value = text;-->
<!--        document.body.appendChild(textarea);-->
<!--        textarea.select();-->

<!--        try {-->
<!--          const successful = document.execCommand('copy');-->
<!--          if (successful) {-->
<!--            showCopySuccess();-->
<!--          } else {-->
<!--            alert('复制失败，请手动复制');-->
<!--          }-->
<!--        } catch (err) {-->
<!--          console.error('复制失败:', err);-->
<!--          alert('复制失败，请手动复制');-->
<!--        }-->

<!--        document.body.removeChild(textarea);-->
<!--      }-->

<!--      // 按Enter键提交-->
<!--      passwordInput.addEventListener('keypress', function(e) {-->
<!--        if (e.key === 'Enter') {-->
<!--          loginBtn.click();-->
<!--        }-->
<!--      });-->

<!--      // 初始聚焦用户名输入框-->
<!--      usernameInput.focus();-->
<!--    });-->
<!--  </script>-->
<!--</body>-->
<!--</html>-->



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>品牌授权码获取系统</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Noto Sans SC', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .auth-container {
      width: 100%;
      max-width: 700px;
      background: white;
      border-radius: 16px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      position: relative;
      animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .brand-banner {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      z-index: 10;
      animation: slideIn 0.4s ease-out;
    }

    @keyframes slideIn {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .brand-banner i {
      color: #4361ee;
    }

    .auth-header {
      background: linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%);
      color: white;
      padding: 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .auth-header::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
      transform: rotate(30deg);
    }

    .auth-header h1 {
      font-size: 32px;
      margin-bottom: 15px;
      position: relative;
      z-index: 1;
    }

    .auth-header p {
      opacity: 0.9;
      font-size: 18px;
      position: relative;
      z-index: 1;
    }

    .login-form {
      padding: 40px 50px;
    }

    .form-group {
      margin-bottom: 25px;
      position: relative;
    }

    .form-group label {
      display: block;
      margin-bottom: 10px;
      font-weight: 500;
      color: #495057;
      font-size: 17px;
    }

    .input-with-icon {
      position: relative;
    }

    .input-with-icon i {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: #6c757d;
      transition: color 0.3s;
      font-size: 18px;
    }

    .form-input {
      width: 100%;
      padding: 16px 16px 16px 55px;
      border: 1px solid #ced4da;
      border-radius: 10px;
      font-size: 17px;
      transition: all 0.3s;
      background: #f8f9fa;
    }

    .form-input:focus {
      outline: none;
      border-color: #4361ee;
      box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
      background: white;
    }

    .form-input:focus + i {
      color: #4361ee;
    }

    .login-btn {
      width: 100%;
      background: linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%);
      color: white;
      border: none;
      padding: 16px;
      border-radius: 10px;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }

    .login-btn::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: rgba(255,255,255,0.1);
      transform: rotate(30deg);
      transition: all 0.6s;
    }

    .login-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
    }

    .login-btn:hover::after {
      transform: rotate(30deg) translate(20%, 20%);
    }

    .login-btn:disabled {
      background: #adb5bd;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .code-section {
      background: #f8f9fa;
      border-radius: 14px;
      padding: 30px;
      text-align: center;
      margin: 30px 0;
      border: 1px dashed #e9ecef;
      display: none;
      animation: fadeInUp 0.5s ease-out;
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .code-title {
      color: #6c757d;
      margin-bottom: 20px;
      font-size: 18px;
    }

    .auth-code {
      font-size: 38px;
      font-weight: 700;
      letter-spacing: 3px;
      background: white;
      padding: 20px 35px;
      border-radius: 12px;
      display: inline-block;
      color: #3a0ca3;
      border: 1px solid #e9ecef;
      font-family: monospace;
      margin: 15px 0;
      box-shadow: 0 6px 15px rgba(0,0,0,0.08);
      position: relative;
      overflow: hidden;
    }

    .auth-code::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    .expiry-info {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-top: 20px;
      color: #6c757d;
      font-size: 16px;
    }

    .info-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .info-value {
      font-weight: 600;
      color: #3a0ca3;
      margin-top: 8px;
      font-size: 17px;
    }

    .action-section {
      display: flex;
      flex-direction: row;
      gap: 15px;
      display: none;
      animation: fadeIn 0.5s ease-out;
    }

    .action-btn {
      background: linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%);
      color: white;
      border: none;
      padding: 18px;
      border-radius: 10px;
      font-size: 17px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      flex: 1;
    }

    .action-btn::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: rgba(255,255,255,0.1);
      transform: rotate(30deg);
      transition: all 0.6s;
    }

    .action-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
    }

    .action-btn:hover::after {
      transform: rotate(30deg) translate(20%, 20%);
    }

    .action-btn.secondary {
      background: #f8f9fa;
      color: #495057;
      border: 1px solid #e9ecef;
    }

    .action-btn.secondary:hover {
      background: #f1f3f5;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .loading-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px;
      display: none;
    }

    .spinner {
      width: 60px;
      height: 60px;
      border: 6px solid rgba(67, 97, 238, 0.2);
      border-top: 6px solid #4361ee;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 25px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .loading-text {
      color: #6c757d;
      font-size: 18px;
      text-align: center;
    }

    .error-section {
      background: #fff5f5;
      border: 1px solid #ffecec;
      border-radius: 14px;
      padding: 30px;
      text-align: center;
      margin-bottom: 30px;
      display: none;
      animation: shake 0.5s ease;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-8px); }
      40%, 80% { transform: translateX(8px); }
    }

    .error-icon {
      font-size: 54px;
      color: #ef476f;
      margin-bottom: 20px;
    }

    .error-title {
      color: #ef476f;
      font-size: 24px;
      margin-bottom: 15px;
    }

    .error-message {
      color: #6c757d;
      margin-bottom: 25px;
      white-space: pre-wrap;
      word-break: break-word;
      text-align: center;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      font-family: monospace;
      max-height: 250px;
      overflow-y: auto;
      font-size: 16px;
    }

    .instructions {
      background: #f0f4ff;
      border-left: 5px solid #4361ee;
      padding: 25px;
      border-radius: 0 12px 12px 0;
      margin-top: 35px;
      display: none;
      animation: fadeIn 0.5s ease-out;
    }

    .instructions h3 {
      color: #3a0ca3;
      margin-bottom: 20px;
      font-size: 20px;
    }

    .instructions ol {
      padding-left: 25px;
    }

    .instructions li {
      margin-bottom: 15px;
      line-height: 1.7;
      position: relative;
      font-size: 17px;
    }

    .instructions li::before {
      content: '';
      position: absolute;
      left: -20px;
      top: 10px;
      width: 10px;
      height: 10px;
      background: #4361ee;
      border-radius: 50%;
    }

    .footer {
      text-align: center;
      padding: 25px;
      color: #6c757d;
      font-size: 15px;
      border-top: 1px solid #f1f3f5;
    }

    .brand-logo {
      position: absolute;
      top: 25px;
      right: 25px;
      width: 70px;
      height: 70px;
      background: white;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: bold;
      color: #4361ee;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      z-index: 1;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.4); }
      70% { box-shadow: 0 0 0 15px rgba(67, 97, 238, 0); }
      100% { box-shadow: 0 0 0 0 rgba(67, 97, 238, 0); }
    }

    .brand-info {
      background: #eef2ff;
      padding: 20px;
      border-radius: 12px;
      margin-bottom: 25px;
      display: flex;
      align-items: center;
      gap: 15px;
      display: none;
    }

    .brand-icon {
      width: 50px;
      height: 50px;
      background: #dbe4ff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: #4361ee;
    }

    .brand-details {
      flex: 1;
    }

    .brand-name {
      font-weight: 600;
      color: #3a0ca3;
      margin-bottom: 5px;
      font-size: 20px;
    }

    .brand-id {
      font-size: 16px;
      color: #6c757d;
    }

    .password-toggle {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: #6c757d;
      cursor: pointer;
      transition: color 0.3s;
      font-size: 18px;
    }

    .password-toggle:hover {
      color: #4361ee;
    }

    .form-row {
      display: flex;
      gap: 20px;
    }

    .form-column {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="auth-container">
    <div id="brandBanner" class="brand-banner" style="display: none;">
      <i class="fas fa-tag"></i>
      <span id="currentBrand">品牌信息</span>
    </div>

    <div class="auth-header">
      <div class="brand-logo">
        <i class="fas fa-key"></i>
      </div>
      <h1>品牌授权码获取系统</h1>
      <p>请验证您的身份以获取授权码</p>
    </div>

    <div class="login-form">
      <div id="brandInfo" class="brand-info">
        <div class="brand-icon">
          <i class="fas fa-building"></i>
        </div>
        <div class="brand-details">
          <div class="brand-name" id="brandName">品牌名称</div>
          <div class="brand-id">品牌ID: <span id="brandId"></span></div>
        </div>
      </div>

      <div class="form-row">
        <div class="form-column">
          <div class="form-group">
            <label for="userId">用户ID</label>
            <div class="input-with-icon">
              <i class="fas fa-user"></i>
              <input type="text" id="userId" class="form-input" placeholder="请输入您的用户ID" autocomplete="username">
            </div>
          </div>
        </div>

        <div class="form-column">
          <div class="form-group">
            <label for="password">密码</label>
            <div class="input-with-icon">
              <i class="fas fa-lock"></i>
              <input type="password" id="password" class="form-input" placeholder="请输入您的密码" autocomplete="current-password">
              <span class="password-toggle" id="passwordToggle">
                <i class="fas fa-eye"></i>
              </span>
            </div>
          </div>
        </div>
      </div>

      <button id="loginBtn" class="login-btn">
        <i class="fas fa-key"></i> 获取授权码
      </button>

      <div id="loadingSection" class="loading-section">
        <div class="spinner"></div>
        <p class="loading-text">正在验证您的身份并生成授权码...</p>
      </div>

      <div id="errorSection" class="error-section">
        <div class="error-icon">⚠️</div>
        <h3 class="error-title">验证失败</h3>
        <p class="error-message" id="errorMessage">用户名或密码不正确</p>
        <button class="action-btn" id="retryButton">
          <i class="fas fa-redo"></i> 重试
        </button>
      </div>

      <div id="successSection">
        <div class="code-section">
          <p class="code-title">您的专属授权码</p>
          <div class="auth-code" id="authCode"></div>
          <div class="expiry-info">
            <div class="info-item">
              <span>有效期</span>
              <span class="info-value">30分钟</span>
            </div>
            <div class="info-item">
              <span>生成时间</span>
              <span class="info-value" id="generationTime"></span>
            </div>
            <div class="info-item">
              <span>关联品牌</span>
              <span class="info-value" id="brandValue"></span>
            </div>
          </div>
        </div>

        <div class="action-section">
          <button class="action-btn" id="copyButton">
            <i class="fas fa-copy"></i> 复制授权码
          </button>
          <button class="action-btn secondary" id="newCodeButton">
            <i class="fas fa-sync"></i> 获取新授权码
          </button>
        </div>

        <div class="instructions">
          <h3>如何使用授权码？</h3>
          <ol>
            <li>返回您的应用程序</li>
            <li>在授权码输入框中粘贴此代码</li>
            <li>完成账号绑定流程</li>
            <li>授权码将在30分钟后失效</li>
          </ol>
        </div>
      </div>
    </div>

    <div class="footer">
      <p>安全授权服务 | 保护您的账号安全</p>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 获取元素引用
      const loginBtn = document.getElementById('loginBtn');
      const userIdInput = document.getElementById('userId');
      const passwordInput = document.getElementById('password');
      const passwordToggle = document.getElementById('passwordToggle');
      const loadingSection = document.getElementById('loadingSection');
      const errorSection = document.getElementById('errorSection');
      const successSection = document.getElementById('successSection');
      const codeSection = document.querySelector('.code-section');
      const actionSection = document.querySelector('.action-section');
      const instructions = document.querySelector('.instructions');
      const authCodeElement = document.getElementById('authCode');
      const generationTimeElement = document.getElementById('generationTime');
      const errorMessageElement = document.getElementById('errorMessage');
      const retryButton = document.getElementById('retryButton');
      const copyButton = document.getElementById('copyButton');
      const newCodeButton = document.getElementById('newCodeButton');
      const brandBanner = document.getElementById('brandBanner');
      const currentBrandElement = document.getElementById('currentBrand');
      const brandValueElement = document.getElementById('brandValue');
      const brandInfo = document.getElementById('brandInfo');
      const brandName = document.getElementById('brandName');
      const brandId = document.getElementById('brandId');

      // 品牌名称映射（只保留小米和美的）
      const brandMapping = {
        xiaomi: { name: "小米", id: "XIAOMI-001" },
        midea: { name: "美的", id: "MIDEA-002" },
        default: { name: "未指定品牌", id: "N/A" }
      };

      // 初始状态设置
      errorSection.style.display = 'none';
      loadingSection.style.display = 'none';
      codeSection.style.display = 'none';
      actionSection.style.display = 'none';
      instructions.style.display = 'none';
      brandBanner.style.display = 'none';
      brandInfo.style.display = 'none';

      // 从URL中获取brand参数
      const urlParams = new URLSearchParams(window.location.search);
      let brand = urlParams.get('brand');

      // 如果URL中有brand参数，显示品牌信息
      if (brand) {
        // 显示品牌横幅
        brandBanner.style.display = 'flex';

        // 显示品牌信息卡片
        brandInfo.style.display = 'flex';

        // 获取品牌显示名称
        const brandData = brandMapping[brand] || brandMapping.default;
        brandName.textContent = brandData.name;
        brandId.textContent = brandData.id;
        currentBrandElement.textContent = brandData.name;
      } else {
        // 如果没有品牌参数，显示默认品牌
        brand = 'default';
        const brandData = brandMapping.default;
        brandName.textContent = brandData.name;
        brandId.textContent = brandData.id;
      }

      // 密码显示/隐藏切换
      passwordToggle.addEventListener('click', function() {
        if (passwordInput.type === 'password') {
          passwordInput.type = 'text';
          passwordToggle.innerHTML = '<i class="fas fa-eye-slash"></i>';
        } else {
          passwordInput.type = 'password';
          passwordToggle.innerHTML = '<i class="fas fa-eye"></i>';
        }
      });

      // 获取授权码按钮事件
      loginBtn.addEventListener('click', function() {
        const userId = userIdInput.value.trim();
        const password = passwordInput.value;

        if (!userId || !password) {
          showError('请输入用户ID和密码');
          return;
        }

        // 显示加载状态
        showLoading();

        // 获取授权码（包含品牌信息）
        getAuthorizationCode(userId, password, brand);
      });

      // 获取授权码函数 - 调用真实API
      async function getAuthorizationCode(userId, password, brand) {
        try {
          // 构造请求体，包含品牌信息
          const requestBody = {
            userId: userId,
            brand: brand
          };

          // 调用真实API
          const response = await fetch('/mockapi/auth/getAuthorizationCode', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestBody)
          });

          // 检查响应状态
          if (!response.ok) {
            // 尝试解析错误信息
            let errorMsg = `请求失败 (状态码: ${response.status})`;

            try {
              const errorData = await response.json();
              if (errorData.message) {
                errorMsg += `: ${errorData.message}`;
              } else if (errorData.error) {
                errorMsg += `: ${errorData.error}`;
              }
            } catch (jsonError) {
              // 如果响应不是JSON，使用状态文本
              const statusText = response.statusText || '未知错误';
              errorMsg += `: ${statusText}`;
            }

            throw new Error(errorMsg);
          }

          // 解析成功响应
          const data = await response.json();

          if (data.status !== 'success') {
            throw new Error(data.message || '获取授权码失败');
          }

          // 显示授权码和品牌信息
          authCodeElement.textContent = data.data.authorizationCode;
          generationTimeElement.textContent = new Date().toLocaleTimeString();

          // 显示品牌名称
          const brandData = brandMapping[brand] || brandMapping.default;
          brandValueElement.textContent = brandData.name;

          showSuccess();
        } catch (err) {
          // 显示详细的错误信息
          showError(err.message || '发生未知错误');
        }
      }

      // 显示加载状态
      function showLoading() {
        loadingSection.style.display = 'flex';
        errorSection.style.display = 'none';
        codeSection.style.display = 'none';
        actionSection.style.display = 'none';
        instructions.style.display = 'none';
      }

      // 显示成功状态
      function showSuccess() {
        loadingSection.style.display = 'none';
        errorSection.style.display = 'none';
        codeSection.style.display = 'block';
        actionSection.style.display = 'flex';
        instructions.style.display = 'block';
      }

      // 显示错误状态
      function showError(message) {
        // 确保错误信息能正确显示
        errorMessageElement.textContent = message;
        loadingSection.style.display = 'none';
        errorSection.style.display = 'block';
        codeSection.style.display = 'none';
        actionSection.style.display = 'none';
        instructions.style.display = 'none';
      }

      // 事件监听器
      retryButton.addEventListener('click', function() {
        errorSection.style.display = 'none';
        userIdInput.focus();
      });

      newCodeButton.addEventListener('click', function() {
        showLoading();
        getAuthorizationCode(userIdInput.value.trim(), passwordInput.value, brand);
      });

      copyButton.addEventListener('click', function() {
        const text = authCodeElement.textContent;

        // 尝试使用现代的Clipboard API
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(text)
            .then(() => {
              showCopySuccess();
            })
            .catch(err => {
              console.error('复制失败:', err);
              fallbackCopyText(text);
            });
        } else {
          fallbackCopyText(text);
        }
      });

      // 显示复制成功提示
      function showCopySuccess() {
        const originalText = copyButton.innerHTML;
        copyButton.innerHTML = '<i class="fas fa-check"></i> 已复制';
        copyButton.style.background = 'linear-gradient(90deg, #06d6a0 0%, #049c6b 100%)';

        setTimeout(() => {
          copyButton.innerHTML = originalText;
          copyButton.style.background = 'linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%)';
        }, 2000);
      }

      // 传统复制方法
      function fallbackCopyText(text) {
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();

        try {
          const successful = document.execCommand('copy');
          if (successful) {
            showCopySuccess();
          } else {
            alert('复制失败，请手动复制');
          }
        } catch (err) {
          console.error('复制失败:', err);
          alert('复制失败，请手动复制');
        }

        document.body.removeChild(textarea);
      }

      // 按Enter键提交
      passwordInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          loginBtn.click();
        }
      });

      // 初始聚焦用户ID输入框
      userIdInput.focus();
    });
  </script>
</body>
</html>

